<template>
    <div class="manager">
        <div class="list" ref="list">
            <v-data-table
                    :headers="headers"
                    :items="list"
                    class="elevation-1" :pagination.sync="pagination">
                <template v-slot:items="props">
                    <td class="text-xs-right">{{ props.item.id }}</td>
                    <td class="text-xs-right">
                        <img width="48" height="48" :src="props.item.avatar">
                    </td>
                    <td class="text-xs-right">{{ props.item.nickname }}</td>
                    <td class="text-xs-right">{{ props.item.number }}</td>
                    <td class="text-xs-right">{{ formatDate(props.item.result)}}</td>
                    <td class="text-xs-right">
                        <v-btn small @click="remove(props.item.id)">删除</v-btn>
                    </td>
                </template>
            </v-data-table>
        </div>

    </div>
</template>

<script>
    import API from 'src/api/home';
    import {formatDate} from 'src/utils/common';
    export default {
        name: "Lottery",
        data() {
            return {
                list: [],
                avatar: '//ossweb-img.qq.com/images/lol/img/champion/Zoe.png',
                headers: [
                    {
                        text: '编号',
                        value: 'id',
                        align: 'right',
                    },
                    { text: '头像', value: 'avatar'},
                    { text: '昵称', value: 'nickname',align: 'right' },
                    { text: '开奖码', value: 'number',align: 'right' },
                    { text: '获奖时间', value: 'result',align: 'right' },
                    { text: '操作', value: 'op',align: 'right' },
                ],
                pagination: {
                    rowsPerPage: -1 // -1 for All",
                }
            }
        },
        computed: {
            classify() {
                return this.$route.query.classify;
            },
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList() {
                API.listAll(this.classify)
                    .then(res=>{
                        this.list = res;
                    })
            },
            remove(id) {
                let r=confirm("是否删除")
                if (r===true)
                {
                    API.remove(id).then(res=>{
                        this.getList();
                    })
                }

            },
            formatDate(timestamp) {
                if(!timestamp) {
                    return ''
                }else {
                        let time = Number.parseInt(timestamp)
                        return formatDate(new Date(time));
                }
            }
        }
    }
</script>

<style lang="scss">
.manager {
    box-sizing: border-box;
    padding: 20px;
    width: 100vw;
    height: 100vh;
    color: white;

}
</style>